<%@page import="com.csc.usermanagement.model.User"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@page import="java.io.File"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
	User user = (User)session.getAttribute("user");
	Object usernameObj = session.getAttribute("username");
	Object passwordObj = session.getAttribute("password");
	Object typeObj = session.getAttribute("type");
	String username = null;
	String password = null;
	String type = null;
	if (usernameObj != null) {
		username = usernameObj.toString();
	}
	if (passwordObj != null) {
		password = passwordObj.toString();
	}
	if (typeObj != null) {
		type = typeObj.toString();
	}
%>

<html>
<head>
<meta charset="utf-8">
<title>LOG IN</title>

<meta name="description" content="3 styles with inline editable feature">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--basic styles-->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">

<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

<!--page specific plugin styles-->

<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="assets/css/jquery.gritter.css">
<link rel="stylesheet" href="assets/css/select2.css">
<link rel="stylesheet" href="assets/css/bootstrap-editable.css">

<!--fonts-->

<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">

<!--ace styles-->

<link rel="stylesheet" href="assets/css/ace.min.css">
<link rel="stylesheet" href="assets/css/ace-responsive.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">

<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

<!--inline styles related to this page-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--basic scripts-->

<!--[if !IE]>-->

<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<!--<![endif]-->

<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

<!--[if !IE]>-->

<script type="text/javascript">
	window.jQuery
			|| document.write("<script src='assets/js/jquery-2.0.3.min.js'>"
					+ "<"+"/script>");
</script>

<!--<![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

<script type="text/javascript">
	if ("ontouchend" in document)
		document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"
				+ "<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!--page specific plugin scripts-->

<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->

<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/jquery.gritter.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="assets/js/jquery.hotkeys.min.js"></script>
<script src="assets/js/bootstrap-wysiwyg.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="assets/js/fuelux/fuelux.spinner.min.js"></script>
<script src="assets/js/x-editable/bootstrap-editable.min.js"></script>
<script src="assets/js/x-editable/ace-editable.min.js"></script>
<script src="assets/js/jquery.maskedinput.min.js"></script>

<!--ace scripts-->

<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>

<!--inline scripts related to this page-->

<script type="text/javascript">
	$(function() {

		//editables on first profile page
		$.fn.editable.defaults.mode = 'inline';
		$.fn.editableform.loading = "<div class='editableform-loading'><i class='light-blue icon-2x icon-spinner icon-spin'></i></div>";
		$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="icon-ok icon-white"></i></button>'
				+ '<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';

		//editables 
		$('#username').editable({
			type : 'text',
			name : 'username'
		});

		var countries = [];
		$.each({
			"CA" : "Canada",
			"IN" : "India",
			"NL" : "Netherlands",
			"TR" : "Turkey",
			"US" : "United States"
		}, function(k, v) {
			countries.push({
				id : k,
				text : v
			});
		});

		var cities = [];
		cities["CA"] = [];
		$.each([ "Toronto", "Ottawa", "Calgary", "Vancouver" ], function(k, v) {
			cities["CA"].push({
				id : v,
				text : v
			});
		});
		cities["IN"] = [];
		$.each([ "Delhi", "Mumbai", "Bangalore" ], function(k, v) {
			cities["IN"].push({
				id : v,
				text : v
			});
		});
		cities["NL"] = [];
		$.each([ "Amsterdam", "Rotterdam", "The Hague" ], function(k, v) {
			cities["NL"].push({
				id : v,
				text : v
			});
		});
		cities["TR"] = [];
		$.each([ "Ankara", "Istanbul", "Izmir" ], function(k, v) {
			cities["TR"].push({
				id : v,
				text : v
			});
		});
		cities["US"] = [];
		$.each([ "New York", "Miami", "Los Angeles", "Chicago", "Wysconsin" ],
				function(k, v) {
					cities["US"].push({
						id : v,
						text : v
					});
				});

		var currentValue = "NL";
		$('#country').editable(
				{
					type : 'select2',
					value : 'NL',
					source : countries,
					success : function(response, newValue) {
						if (currentValue == newValue)
							return;
						currentValue = newValue;

						var source = (!newValue || newValue == "") ? []
								: cities[newValue];
						$('#city').editable('destroy').editable({
							type : 'select2',
							source : source
						}).editable('setValue', null);
					}
				});

		$('#city').editable({
			type : 'select2',
			value : 'Amsterdam',
			source : cities[currentValue]
		});

		$('#signup').editable({
			type : 'date',
			format : 'yyyy-mm-dd',
			viewformat : 'dd/mm/yyyy',
			datepicker : {
				weekStart : 1
			}
		});

		$('#age').editable({
			type : 'spinner',
			name : 'age',
			spinner : {
				min : 16,
				max : 99,
				step : 1
			}
		});

		//var $range = document.createElement("INPUT");
		//$range.type = 'range';
		$('#login').editable({
			type : 'slider',//$range.type == 'range' ? 'range' : 'slider',
			name : 'login',
			slider : {
				min : 1,
				max : 50,
				width : 100
			},
			success : function(response, newValue) {
				if (parseInt(newValue) == 1)
					$(this).html(newValue + " hour ago");
				else
					$(this).html(newValue + " hours ago");
			}
		});

		$('#about').editable({
			mode : 'inline',
			type : 'wysiwyg',
			name : 'about',
			wysiwyg : {
			//css : {'max-width':'300px'}
			},
			success : function(response, newValue) {
			}
		});

		// *** editable avatar *** //
		try {//ie8 throws some harmless exception, so let's catch it

			//it seems that editable plugin calls appendChild, and as Image doesn't have it, it causes errors on IE at unpredicted points
			//so let's have a fake appendChild for it!
			if (/msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()))
				Image.prototype.appendChild = function(el) {
				}

			var last_gritter
			$('#avatar')
					.editable(
							{
								type : 'image',
								name : 'avatar',
								value : null,
								image : {
									//specify ace file input plugin's options here
									btn_choose : 'Change Avatar',
									droppable : true,
									/**
									//this will override the default before_change that only accepts image files
									before_change: function(files, dropped) {
										return true;
									},
									 */

									//and a few extra ones here
									name : 'avatar',//put the field name here as well, will be used inside the custom plugin
									max_size : 110000,//~100Kb
									on_error : function(code) {//on_error function will be called when the selected file has a problem
										if (last_gritter)
											$.gritter.remove(last_gritter);
										if (code == 1) {//file format error
											last_gritter = $.gritter
													.add({
														title : 'File is not an image!',
														text : 'Please choose a jpg|gif|png image!',
														class_name : 'gritter-error gritter-center'
													});
										} else if (code == 2) {//file size rror
											last_gritter = $.gritter
													.add({
														title : 'File too big!',
														text : 'Image size should not exceed 100Kb!',
														class_name : 'gritter-error gritter-center'
													});
										} else {//other error
										}
									},
									on_success : function() {
										$.gritter.removeAll();
									}
								},
								url : function(params) {
									// ***UPDATE AVATAR HERE*** //
									//You can replace the contents of this function with examples/profile-avatar-update.js for actual upload

									var deferred = new $.Deferred

									//if value is empty, means no valid files were selected
									//but it may still be submitted by the plugin, because "" (empty string) is different from previous non-empty value whatever it was
									//so we return just here to prevent problems
									var value = $('#avatar').next().find(
											'input[type=hidden]:eq(0)').val();
									if (!value || value.length == 0) {
										deferred.resolve();
										return deferred.promise();
									}

									//dummy upload
									setTimeout(
											function() {
												if ("FileReader" in window) {
													//for browsers that have a thumbnail of selected image
													var thumb = $('#avatar')
															.next().find('img')
															.data('thumb');
													if (thumb)
														$('#avatar').get(0).src = thumb;
												}

												deferred.resolve({
													'status' : 'OK'
												});

												if (last_gritter)
													$.gritter
															.remove(last_gritter);
												last_gritter = $.gritter
														.add({
															title : 'Avatar Updated!',
															text : 'Uploading to server can be easily implemented. A working example is included with the template.',
															class_name : 'gritter-info gritter-center'
														});

											},
											parseInt(Math.random() * 800 + 800))

									return deferred.promise();
								},

								success : function(response, newValue) {
								}
							})
		} catch (e) {
		}

		//another option is using modals
		$('#avatar2')
				.on(
						'click',
						function() {
							var modal = '<div class="modal hide fade">\
						<div class="modal-header">\
							<button type="button" class="close" data-dismiss="modal">&times;</button>\
							<h4 class="blue">Change Avatar</h4>\
						</div>\
						\
						<form class="no-margin">\
						<div class="modal-body">\
							<div class="space-4"></div>\
							<div style="width:75%;margin-left:12%;"><input type="file" name="file-input" /></div>\
						</div>\
						\
						<div class="modal-footer center">\
							<button type="submit" class="btn btn-small btn-success"><i class="icon-ok"></i> Submit</button>\
							<button type="button" class="btn btn-small" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button>\
						</div>\
						</form>\
					</div>';

							var modal = $(modal);
							modal.modal("show").on("hidden", function() {
								modal.remove();
							});

							var working = false;

							var form = modal.find('form:eq(0)');
							var file = form.find('input[type=file]').eq(0);
							file
									.ace_file_input({
										style : 'well',
										btn_choose : 'Click to choose new avatar',
										btn_change : null,
										no_icon : 'icon-picture',
										thumbnail : 'small',
										before_remove : function() {
											//don't remove/reset files while being uploaded
											return !working;
										},
										before_change : function(files, dropped) {
											var file = files[0];
											if (typeof file === "string") {
												//file is just a file name here (in browsers that don't support FileReader API)
												if (!(/\.(jpe?g|png|gif)$/i)
														.test(file))
													return false;
											} else {//file is a File object
												var type = $.trim(file.type);
												if ((type.length > 0 && !(/^image\/(jpe?g|png|gif)$/i)
														.test(type))
														|| (type.length == 0 && !(/\.(jpe?g|png|gif)$/i)
																.test(file.name))//for android default browser!
												)
													return false;

												if (file.size > 110000) {//~100Kb
													return false;
												}
											}

											return true;
										}
									});

							form
									.on(
											'submit',
											function() {
												if (!file
														.data('ace_input_files'))
													return false;

												file.ace_file_input('disable');
												form.find('button').attr(
														'disabled', 'disabled');
												form
														.find('.modal-body')
														.append(
																"<div class='center'><i class='icon-spinner icon-spin bigger-150 orange'></i></div>");

												var deferred = new $.Deferred;
												working = true;
												deferred
														.done(function() {
															form
																	.find(
																			'button')
																	.removeAttr(
																			'disabled');
															form
																	.find(
																			'input[type=file]')
																	.ace_file_input(
																			'enable');
															form
																	.find(
																			'.modal-body > :last-child')
																	.remove();

															modal.modal("hide");

															var thumb = file
																	.next()
																	.find('img')
																	.data(
																			'thumb');
															if (thumb)
																$('#avatar2')
																		.get(0).src = thumb;

															working = false;
														});

												setTimeout(
														function() {
															deferred.resolve();
														},
														parseInt(Math.random() * 800 + 800));

												return false;
											});

						});

		//////////////////////////////
		$('#profile-feed-1').slimScroll({
			height : '250px',
			alwaysVisible : true
		});

		$('.profile-social-links > a').tooltip();

		$('.easy-pie-chart.percentage').each(function() {
			var barColor = $(this).data('color') || '#555';
			var trackColor = '#E2E2E2';
			var size = parseInt($(this).data('size')) || 72;
			$(this).easyPieChart({
				barColor : barColor,
				trackColor : trackColor,
				scaleColor : false,
				lineCap : 'butt',
				lineWidth : parseInt(size / 10),
				animate : false,
				size : size
			}).css('color', barColor);
		});

		///////////////////////////////////////////

		//show the user info on right or left depending on its position
		$('#user-profile-2 .memberdiv').on('mouseenter', function() {
			var $this = $(this);
			var $parent = $this.closest('.tab-pane');

			var off1 = $parent.offset();
			var w1 = $parent.width();

			var off2 = $this.offset();
			var w2 = $this.width();

			var place = 'left';
			if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2))
				place = 'right';

			$this.find('.popover').removeClass('right left').addClass(place);
		}).on('click', function() {
			return false;
		});

		///////////////////////////////////////////
		$('#user-profile-3')
				.find('input[type=file]')
				.ace_file_input(
						{
							style : 'well',
							btn_choose : 'Change avatar',
							btn_change : null,
							no_icon : 'icon-picture',
							thumbnail : 'large',
							droppable : true,
							before_change : function(files, dropped) {
								var file = files[0];
								if (typeof file === "string") {//files is just a file name here (in browsers that don't support FileReader API)
									if (!(/\.(jpe?g|png|gif)$/i).test(file))
										return false;
								} else {//file is a File object
									var type = $.trim(file.type);
									if ((type.length > 0 && !(/^image\/(jpe?g|png|gif)$/i)
											.test(type))
											|| (type.length == 0 && !(/\.(jpe?g|png|gif)$/i)
													.test(file.name))//for android default browser!
									)
										return false;

									if (file.size > 110000) {//~100Kb
										return false;
									}
								}

								return true;
							}
						}).end().find('button[type=reset]').on(
						ace.click_event,
						function() {
							$('#user-profile-3 input[type=file]')
									.ace_file_input('reset_input');
						}).end().find('.date-picker').datepicker().next().on(
						ace.click_event, function() {
							$(this).prev().focus();
						})
		$('.input-mask-phone').mask('(999) 999-9999');

		////////////////////
		//change profile
		$('[data-toggle="buttons-radio"]').on('click', function(e) {
			var target = $(e.target);
			var which = parseInt($.trim(target.text()));
			$('.user-profile').parent().hide();
			$('#user-profile-' + which).parent().show();
		});
	});
</script>

<script type="text/javascript">
	function validateLogIn() {
		var form = document.forms["logInForm"];
		var username = form.username.value;
		var password = form.password.value;

		if (username == "") {
			alert('Please input username!');
			return false;
		}
		if (password == "") {
			alert('Please input password!');
			return false;
		}
		return true;
	}
</script>

</head>
<body>
		<!--  Nav bar -->
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a href="index.jsp" class="brand">
						<small>
							<i class="icon-leaf"></i>
							Servlet-JSP User Management Application
						</small>
					</a><!--/.brand-->

					<ul class="nav ace-nav pull-right">
					
						<!--  Register link -->
						
						<li class="green">
							<a href="Register.jsp">Register</a>
						</li>
					
						<!--  Sign in / Logged in User -->
						
						<li class="light-blue">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo">
								<span class="user-info">
									<small>Welcome,</small><%= username %>
								</span>

								<i class="icon-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">

								<li>
									<a href="ChangePassword.jsp">
										<i class="icon-edit"></i>
										Change Password
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="LogOut">
										<i class="icon-off"></i>
										Log Out
									</a>
								</li>
							</ul>
						</li>
					
					</ul><!--/.ace-nav-->
				</div><!--/.container-fluid-->
			</div><!--/.navbar-inner-->
		</div>

	<!-- Begin main-content -->
	<div class="page-content">
		<div class="page-header position-relative">
			<h1>Upload Files</h1>
		</div>
		<!--/.page-header-->

		<div class="row-fluid">
			<div class="span12">
				<!--PAGE CONTENT BEGINS-->

				<div>
					<form action="Upload" method="post" enctype="multipart/form-data">
						<p>
							Choose a file: 
							
							<input type="file" name="fileUpload">
							<!--  
							<input
								type="submit" value="upload" class="btn btn-default">
							 -->
							 <br>
						 	<button class="btn btn-info" type="submit">
								Upload
								<i class="icon-cloud-upload bigger-125 icon-on-right"></i>
							</button>
					</form>
					<h3>Your repository</h3>
					<table>
						<tr>
							<td width="196"><label class="form-control">File
									Name</label></td>
							<td width="196"><label class="form-control">Length</label></td>
							<td width="196"><label class="form-control">File location</label></td>
						</tr>
					</table>
					<c:forEach var="file" items="${listFiles}">
						<form action="Download" method="post">
							<table>
								<tr>
									<td>
										<input type="text" name="fileName" class="form-control" value="${file.getName() }"
										readonly="readonly"></input>
									</td>
									
									<td>
										<input readonly="readonly" type="text" name="length" class="form-control"
										value="${file.length() } bytes">
									</td>
									
									<td>
										<input readonly="readonly" type="text" name="path" class="form-control"
										value="${file.getAbsolutePath() }">
									</td>
									
									<td>
									
										<button class="btn btn-info" type="submit">
											Download
											<i class="icon-cloud-download bigger-125 icon-on-right"></i>
										</button>
										<!-- 
										<input type="submit" value="Download" name="btnChange"
											class="btn btn-default">
										 -->
									</td>
										
								</tr>
							</table>
						</form>
					</c:forEach>
				</div>

				<!--PAGE CONTENT ENDS-->
			</div>
			<!--/.span-->
		</div>
		<!--/.row-fluid-->
	</div>
</body>
</html>

